<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>消息盒子</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.18/css/layui.css">
  <style>
    .layim-msgbox{margin: 15px;}
    .layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
    .layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
    .layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
    .layim-msgbox li p span{padding-left: 5px; color: #999;}
    .layim-msgbox li p em{font-style: normal; color: #FF5722;}

    .layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
    .layim-msgbox-user{padding-top: 5px;}
    .layim-msgbox-content{margin-top: 3px;}
    .layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
    .layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
  </style>
</head>
<body>

<ul class="layim-msgbox" id="LAY_view"></ul>

<div style="margin: 0 15px;">
  <blockquote class="layui-elem-quote">
    注意：该页面为 msgbox 参数指向的自定义页面。
    <br> 此页为消息盒子的模拟数据，实际使用时请进行相应修改。
  </blockquote>
</div>

<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.from){ }}
    <li data-uid="{{= item.from }}" data-fromGroup="{{= item.from_group }}">
      <a href="/u/{{= item.from }}/" target="_blank">
        <img src="{{= item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
      </a>
      <p class="layim-msgbox-user">
        <a href="/u/{{= item.from }}/" target="_blank">{{= item.user.username||'' }}</a>
        <span>{{= item.time }}</span>
      </p>
      <p class="layim-msgbox-content">
        {{= item.content }}
        <span>{{= item.remark ? '附言: '+item.remark : '' }}</span>
      </p>
      <p class="layim-msgbox-btn">
        <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
        <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
      </p>
    </li>
  {{# } else { }}
    <li class="layim-msgbox-system">
      <p><em>系统：</em>{{= item.content }}<span>{{= item.time }}</span></p>
    </li>
  {{# }
}); }}
</textarea>

<!-- 上述模版采用了 laytpl 语法 -->

<script src="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.18/layui.js"></script>
<script>
layui.config({
  layimPath: '../../', // 配置 layim.js 所在目录
  layimResPath: '../' // layim 资源文件所在目录
}).extend({
  layim: layui.cache.layimPath + 'layim' // 配置 layim 组件所在的路径
}).use(['layim', 'flow'], function(){
  var layim = layui.layim;
  var layer = layui.layer;
  var laytpl = layui.laytpl;
  var $ = layui.jquery;
  var flow = layui.flow;

  var cache = {}; // 用于临时记录请求到的数据

  // 请求消息
  var renderMsg = function(page, callback){
    // 实际部署时，请将下述 getmsg.json 改为你的接口地址
    $.get('getmsg.json', {
      page: page || 1
    }, function(res){
      if(res.code != 0){
        return layer.msg(res.msg);
      }

      // 记录来源用户信息
      layui.each(res.data, function(index, item){
        cache[item.from] = item.user;
      });

      callback && callback(res.data, res.pages);
    });
  };

  // 消息信息流
  flow.load({
    elem: '#LAY_view', // 流加载容器
    isAuto: false,
    end: '<li class="layim-msgbox-tips">暂无更多新消息</li>',
    done: function(page, next){ // 加载下一页
      renderMsg(page, function(data, pages) {
        var html = laytpl(LAY_tpl.value).render({
          data: data,
          page: page
        });
        next(html, page < pages);
      });
    }
  });

  // 打开页面即把消息标记为已读
  /*
  $.post('/message/read', {
    type: 1
  });
  */

  // 操作
  var active = {
    // 同意
    agree: function(othis) {
      var li = othis.parents('li')
      var uid = li.data('uid')
      var from_group = li.data('fromGroup')
      var user = cache[uid];

      // 打开添加好友面板
      parent.layui.layim.openAddFriendPanel({
        type: 'friend',
        username: user.username,
        avatar: user.avatar,
        group: parent.layui.layim.cache().friend, // 获取好友分组数据
        onConfirm: function(obj) {

          // 将好友添加到联系人面板
          parent.layui.layim.addContacts({
            type: 'friend',
            id: uid,
            username: user.username,
            avatar: user.avatar,
            gid: obj.gid,
            sign: user.sign
          });

          parent.layer.close(obj.index);
          othis.parent().html('已同意');

          // 实际开发时，一般需向后端发送同意添加好友接口，再将好友添加到联系人面板
          /*
          $.post('/api/argee-contacts', {}, function(res) {
            // 将好友添加到联系人面板
            // …
          });
          */
        }
      });
    },

    // 拒绝
    refuse: function(othis) {
      var li = othis.parents('li');
      var uid = li.data('uid');

      layer.confirm('确定拒绝吗？', function(index){
        layer.close(index);
        othis.parent().html('<em>已拒绝</em>');

        /*
        $.post('/im/refuseFriend', {
          uid: uid // 对方用户 ID
        }, function(res){
          if(res.code != 0){
            return layer.msg(res.msg);
          }
          layer.close(index);
          othis.parent().html('<em>已拒绝</em>');
        });
        */
      });
    }
  };

  $('body').on('click', '.layui-btn', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>
</body>
</html>
